import React from 'react';
import { Text, publishDps, View, Image, vibrateShort } from '@ray-js/ray';
import clsx from 'clsx';
import Strings from '@/i18n';
import _ from 'lodash';
import { Slider } from '@ray-js/smart-ui';
import styles from './index.module.less';
import noiceRes from '../../../public/noiceImage';

import { allList, getCurrentByIndex } from '../SongSet/index';
import { LogoComponent } from '../logoComponent';

export function ContolBox({
  current,
  switchMusic,
  onSongeChange,
  onStatusChange,
  voice,
  changeVoice,
  className,
  isBle,
  color,
}: {
  current: number;
  switchMusic: boolean;
  onSongeChange: (val: number) => void;
  onStatusChange: (val: boolean) => void;
  voice: number;
  changeVoice: (val: number) => void;
  className?: string;
  isBle: boolean;
  color: string;
}) {
  const currentSong = getCurrentByIndex(current);
  return (
    <View className={clsx(styles.container, className)}>
      <View className={styles.controlBox}>
        <View className={styles.songInfo}>
          <Image
            src={isBle ? noiceRes.ble_b : currentSong.imageActive}
            className={styles.songImage}
          />
          <Text className={styles.title}>
            {isBle ? Strings.getLang('bluetooth') : currentSong.name}
          </Text>
        </View>

        <View className={styles.voiceSliderBox}>
          <View className={styles.voiceIcon}>
            <Image src={noiceRes.voice} className={styles.voiceIcon} />
          </View>

          <Slider
            enableTouch
            maxTrackHeight="12rpx"
            minTrackHeight="12rpx"
            thumbHeight="36rpx"
            thumbWidth="36rpx"
            max={100}
            min={0}
            step={1}
            value={voice}
            maxTrackColor="#DEDFE1"
            minTrackColor="#000"
            thumbColor="#000"
            onAfterChange={value => {
              changeVoice?.(value);
            }}
            moveEventName="changeVoice"
            style={{
              width: `314rpx`,
              marginInline: '20rpx',
            }}
          />

          <View className={styles.textBox}>
            <Text className={styles.voiceValue}>{voice}</Text>
            <Text className={styles.voiceUnit}>%</Text>
          </View>
        </View>

        <View className={styles.controlBoxItemWrap}>
          <Image
            src={noiceRes.prev}
            className={styles.controlBoxItem}
            onTap={() => {
              vibrateShort({ type: 'middle' });
              if (isBle) {
                publishDps({
                  music_control: 'up',
                });
                return;
              }
              publishDps({
                music_list: (current - 1 > 0 ? current - 1 : allList.length).toString(),
              });
            }}
          />

          <View
            className={styles.controlBoxCenter}
            onClick={() => {
              vibrateShort({ type: 'middle' });
              publishDps({
                switch_music: !switchMusic,
              });
            }}
          >
            <Image
              src={switchMusic ? noiceRes.stop : noiceRes.play}
              className={clsx(styles.controlBoxItem, !switchMusic && styles.play)}
            />
          </View>

          <Image
            src={noiceRes.next}
            className={styles.controlBoxItem}
            onTap={() => {
              // setScrollEnabled(false);
              vibrateShort({ type: 'middle' });

              if (isBle) {
                publishDps({
                  music_control: 'down',
                });
                return;
              }
              publishDps({
                music_list: ((current % allList.length) + 1).toString(),
              });
            }}
          />
        </View>
      </View>
      <LogoComponent color={color} scale={1} className={styles.logo} />
    </View>
  );
}
